<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向对齐属性【文本与图片对齐】</title>
		<!-- 垂直方向对象属性  vertical-align
		     使用方法：1.用于表格中单元格垂直居中
			          2.用于行内元素以及行内块元素的垂直居中【文本和图片垂直居中（对齐）效果】
					     对齐分为四种：基线对齐、顶部对齐、居中对齐、底部对齐
						 元素种类：块元素、行元素、行内块元素
						 块元素特点：独占一行、设置宽高
						 行元素特点：一行内显示、不可设置宽高
						 网页：元素之间嵌套生成
						 行元素与块元素可以任意嵌套【前提：外围设置宽高----行套块
						                                               块套块   √
																	   块套行   √
												  前提：一行内显示------行套块    √
												                       块套块   ×
																	   块套行   √
																	   行套行   √】 
		 -->
		 <style>
			  im g:nth-child(1){
				 /* vertical-align:baseline 默认基线对齐 */
				 vertical-align: baseline;
				 border: 1px solid red;
			 }
			 /* 问题：派生选择器，特点：找后代 p img */
			  im g:nth-child(2){
				 /* vertical-align:top 顶部对齐 */
				 vertical-align: top;
				 border: 1px solid red;
			 }
			 img.baseline{
				 vertical-align: baseline;
			 }
			 img.top{
			 	 vertical-align: top;
			 }
			 img.middle{
			 	 vertical-align: middle;
			 }
			 img.bottom{
			 	 vertical-align: bottom;
			 }
		 </style>
	</head>
	<body>
		<!-- 需求结构：4个p、嵌套文字：图片叫什么名字
		                    文字加img，设定宽高：25~100px
							每个图片后面加：基线对齐、顶部对齐、居中对齐、底部对齐
							-->
		<h1>文本与图片的垂直属性</h1>
		<p>唔西·迪西<img class="baseline" src="img/1.gif" alt="唔西·迪西" width="80px" height="80px"/>基线对齐</p>
		<p>派大星<img class="top" src="img/2.png" alt="派大星" width="80px" height="80px"/>顶部对齐</p>
		<p>唔西·迪西1<img class="middle" src="img/3.gif" alt="唔西·迪西1" width="80px" height="80px"/>居中对齐</p>
		<p>派大星1<img class="bottom" src="img/4.png" alt="派大星1" width="80px" height="80px"/>底部对齐</p>
		<!-- css选择器---抓第一张图片 ...
		  思路：派生选择器：找后代+伪类选择器：添加效果【错误】
		  错误原因：html结构不符合派生特点：p包含4个img
		          伪类选择器，4个img需要在一个p中
		  p img：nth-child(1)
		-->
	</body>
</html>